<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>控制 AI 数字人编辑器</title>
    <style>
        iframe{
	color-scheme:light;
}
        #button-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            z-index: 1000;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-bottom: 1px solid #ddd;
        }
        body {
            padding-top: 60px; /* 为固定的button-container留出空间 */
        }
    </style>
</head>
<body>
    <h1>AI 数字人编辑器控制面板</h1>
    
    <!-- 控制按钮 -->
    <div id="button-container">
        <!-- 按钮将在这里动态生成 -->
    </div>
    
    <!-- 文本直驱控制 -->
    <div style="margin: 20px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px;">
        <h3>文本直驱</h3>
        <div style="display: flex; gap: 10px; align-items: center;">
            <input type="text" id="text-input" placeholder="请输入要驱动的文本" style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 3px;" />
            <button onclick="sendTextDrive()" style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">发送</button>
        </div>
    </div>
    <!-- 消息对话 -->
    <div style="margin: 20px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px;">
        <h3>消息对话</h3>
        <div style="display: flex; gap: 10px; align-items: center;">
            <input type="text" id="message-input" placeholder="请输入要对话的文本" style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 3px;" />
            <button onclick="sendMessage()" style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer;">发送</button>
        </div>
    </div>
    
    <!-- 语音动画控制 -->
    <div style="margin: 20px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px;">
        <h3>语音动画控制</h3>
        <div style="display: flex; gap: 10px; align-items: center;">
            <button onclick="showVoiceAnimation(true)" style="padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">开启语音动画</button>
            <button onclick="showVoiceAnimation(false)" style="padding: 8px 16px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">关闭语音动画</button>
        </div>
    </div>
    <div>
        <h3>事件内容</h3>
        <div id="event-content"></div>
    </div>
    <div style="width: 100%;height: 1300px;position: relative;">
        <iframe style="position: absolute;left: 0;top: 0;width: 100%;height: 1300px;" class="center" src="https://aimeta.huilan.com:32108/aihuman/aihumanShow/digital_Screen/index.html" style="width: 100%; height: 100%;"></iframe>
        <!-- AI 数字人编辑器 iframe -->
        <iframe 
            id="ai-human-editor" 
            src="http://localhost:5173/?id=1954805704032763906" 
            width="100%" 
            allowtransparency="true"
            frameborder="0"
            style="background: transparent;border: none;position: absolute;left: 0;top: 0;"
            height="1300px">
        </iframe>
        <div id="loading-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 1000;">
            <div style="display: flex;justify-content: center;flex-direction: column;background: white; padding: 40px; border-radius: 10px; text-align: center; min-width: 300px;">
                <div id="loading-spinner" style="width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
                <div id="loading-progress" style="width: 100%; height: 20px; background: #f0f0f0; border-radius: 10px; margin-bottom: 20px; overflow: hidden;">
                    <div id="progress-bar" style="height: 100%; background: linear-gradient(90deg, #3498db, #2ecc71); width: 0%; transition: width 0.3s ease; border-radius: 10px;"></div>
                </div>
                <div id="loading-percentage" style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px;">0%</div>
                <div id="loading-word" style="font-size: 16px; color: #666;">正在加载...</div>
                <button id="start-btn" style="display: none; margin-top: 20px; padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;" onclick="startInteraction()">开始对话</button>
            </div>
        </div>
        <style>
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        </style>
    </div>
   
    
    
    <script>
        // 获取 iframe 元素
        const iframe = document.getElementById('ai-human-editor');
         const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        if (iframeDoc && iframeDoc.documentElement) {
            iframeDoc.documentElement.style.background = 'transparent';
            iframeDoc.body.style.background = 'transparent';
            console.log('已设置iframe内部背景为透明');
        }
        // 播放指定流程节点
        function playFlowNode(flowNodeId) {
            if (!iframe || !iframe.contentWindow) {
                console.error('iframe 未加载完成');
                return;
            }
            
            const message = {
                type: 'play_flownode',
                data: {
                    id: flowNodeId
                }
            };
            
            console.log('发送播放流程节点消息:', message);
            iframe.contentWindow.postMessage(message, '*');
        }
        
        // 发送文本直驱
        function sendTextDrive() {
            const textInput = document.getElementById('text-input');
            const text = textInput.value.trim();
            
            if (!text) {
                alert('请输入要驱动的文本');
                return;
            }
            
            if (!iframe || !iframe.contentWindow) {
                console.error('iframe 未加载完成');
                return;
            }
            
            const message = {
                type: 'text_drive',
                data: {
                    text: text
                }
            };
            
            console.log('发送文本直驱消息:', message);
            iframe.contentWindow.postMessage(message, '*');
            
            // 清空输入框
            textInput.value = '';
        }
        // 发送问答消息
        function sendMessage() {
            const textInput = document.getElementById('message-input');
            const text = textInput.value.trim();
            
            if (!text) {
                alert('请输入要驱动的文本');
                return;
            }
            
            if (!iframe || !iframe.contentWindow) {
                console.error('iframe 未加载完成');
                return;
            }
            
            const message = {
                type: 'message_send',
                data: {
                    text: text
                }
            };
            
            console.log('发送问答消息:', message);
            iframe.contentWindow.postMessage(message, '*');
            
            // 清空输入框
            textInput.value = '';
        }
        
        // 控制语音动画显示
        function showVoiceAnimation(show) {
            if (!iframe || !iframe.contentWindow) {
                console.error('iframe 未加载完成');
                return;
            }
            
            // 使用postMessage与iframe通信，避免跨域问题
            const message = {
                type: 'show_voice_anim',
                data: {
                    show: show
                }
            };
            
            console.log('发送语音动画控制消息:', message);
            iframe.contentWindow.postMessage(message, '*');
        }
        
        // 监听回车键发送
        document.addEventListener('DOMContentLoaded', function() {
            const textInput = document.getElementById('text-input');
            textInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    sendTextDrive();
                }
            });
        });
        
        // 等待 iframe 加载完成
        iframe.addEventListener('load', function() {
            console.log('AI 数字人编辑器加载完成');
        });
        
        // 显示加载页面
        function showLoading() {
            const loadingContainer = document.getElementById('loading-container');
            loadingContainer.style.display = 'flex';
        }
        
        // 隐藏加载页面
        function hideLoading() {
            const loadingContainer = document.getElementById('loading-container');
            loadingContainer.style.display = 'none';
        }
        
        // 开始交互
        function startInteraction() {
            hideLoading();
            console.log('开始交互');
            
            // 向AI数字人编辑器发送开始场景消息
            const iframe = document.getElementById('ai-human-editor');
            if (iframe && iframe.contentWindow) {
                iframe.contentWindow.postMessage({
                    type: 'start_scene',
                    data: {}
                }, '*');
                console.log('已发送开始场景消息');
                
                // 设置iframe内部html标签背景为透明
                try {
                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                    if (iframeDoc && iframeDoc.documentElement) {
                        iframeDoc.documentElement.style.background = 'transparent';
                        iframeDoc.body.style.background = 'transparent';
                        console.log('已设置iframe内部背景为透明');
                    }
                } catch (error) {
                    console.log('无法访问iframe内部文档，可能存在跨域限制:', error);
                }
            }
        }
        showLoading();
        
        
        // 监听来自子窗口的消息（可选）
        window.addEventListener('message', function(event) {
            if (event.data && event.data.type === 'timeline-event') {
                console.log('收到时间轴事件:', event.data);
                // 处理时间轴事件
                const eventContent = document.getElementById('event-content');
                const eventDiv = document.createElement('div');
                eventDiv.textContent = `时间轴事件: ${JSON.stringify(event.data)}`;
                eventDiv.style.marginBottom = '5px';
                eventDiv.style.padding = '5px';
                eventDiv.style.borderBottom = '1px solid #eee';
                eventContent.appendChild(eventDiv);
            } else if (event.data && event.data.type === 'loading-event') {
                // console.log('收到加载事件:', event.data);
                // 处理加载事件
                if (event.data.actionType === 'progress') {
                    const percent = event.data.data.percent;
                    const progressBar = document.getElementById('progress-bar');
                    const loadingPercentage = document.getElementById('loading-percentage');
                    progressBar.style.width = percent + '%';
                    loadingPercentage.textContent = Math.round(percent) + '%';
                } else if (event.data.actionType === 'word') {
                    const word = event.data.data.word;
                    const loadingWord = document.getElementById('loading-word');
                    loadingWord.textContent = word;
                } else if (event.data.actionType === 'finish') {
                    const loadingSpinner = document.getElementById('loading-spinner');
                    const loadingProgress = document.getElementById('loading-progress');
                    const loadingPercentage = document.getElementById('loading-percentage');
                    const loadingWord = document.getElementById('loading-word');
                    const startBtn = document.getElementById('start-btn');
                    
                    loadingSpinner.style.display = 'none';
                    loadingProgress.style.display = 'none';
                    loadingPercentage.style.display = 'none';
                    loadingWord.textContent = '数字人对话已就绪，点击开始';
                    startBtn.style.display = 'block';
                }
            } else if (event.data && event.data.type === 'flownode-event' && event.data.actionType === 'list') {
                console.log('收到流程节点信息:', event.data);
                const flowNodeConfig = event.data.data.flowNodeList;
                const buttonContainer = document.getElementById('button-container');
                buttonContainer.innerHTML = ''; // 清空现有按钮

                flowNodeConfig.forEach(node => {
                    const button = document.createElement('button');
                    button.textContent = `播放 ${node.name} 节点`;
                    button.onclick = () => playFlowNode(node.id);
                    buttonContainer.appendChild(button);
                });
            }else if (event.data &&event.data.type === 'setIframePointerEvents') {
              // 找到发送消息的iframe元素
              const iframes = document.querySelectorAll('iframe');
              iframes.forEach(iframe => {
                if (iframe.contentWindow === event.source) {
                //   iframe.style.pointerEvents = event.data.value;
                }
              });
            }
        });
    </script>
</body>
</html>
